<template>


        <div class="super_container">

                <myheader :total_price="total" :count='count'></myheader>
            
                <!-- Home -->
            
								
								<!-- Home -->

	<div class="home">
		<div class="parallax_background parallax-window" data-parallax="scroll" ></div>
		<div class="home_container">
			<div class="home_content">
				<div class="home_title">Order</div>
				<div class="breadcrumbs">
					<ul class="d-flex flex-row align-items-center justify-content-start">
						<li><a href="index.html">Home</a></li>
						<li>Your Cart</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- Cart -->

	<div class="cart_section">
		<div class="section_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="cart_container">
							
							<!-- Cart Bar -->
							<div class="cart_bar">
								<ul class="cart_bar_list item_list d-flex flex-row align-items-center justify-content-start">
									<li>Product</li>
									<li>Price</li>
									<li>Quantity</li>
									<li>Total</li>
								</ul>
							</div>

							<!-- Cart Items -->
							<div class="cart_items">
								<ul class="cart_items_list"  v-for='(g,index) in datalist'>

									<!-- Cart Item -->
									<li class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
										<div class="product d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
											<div><div class="product_image"><img :src="getImgurl(g.image)" alt=""></div></div>
											<div class="product_name"><a :href="'/product/?id=' +g.id">{{ g.name }}</a></div>
										</div>
									
										<div class="product_price text-lg-center product_text"><span>Price: </span>${{ g.price }}</div>
										<div class="product_quantity_container">
											<div class="product_quantity ml-lg-auto mr-lg-auto text-center">
												<span class="product_text product_num">{{ g.num }}</span>

											</div>
										</div>
										<div class="product_total text-lg-center product_text"><span>Total: </span>${{g.price * g.num}}</div>
									</li>
								</ul>
							</div>

							<!-- Cart Buttons -->
							<div class="cart_buttons d-flex flex-row align-items-start justify-content-start">
								<div class="cart_buttons_inner ml-auto d-flex flex-row align-items-start justify-content-start flex-wrap">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="section_container cart_extra_container">
			<div class="container">
				<div class="row">

					<!-- Shipping & Delivery -->
					<div class="col-xxl-6">
						<div class="cart_extra cart_extra_1">
							<div class="cart_extra_content cart_extra_coupon">
								<div class="cart_extra_title">Coupon code</div>
								<div class="coupon_form_container">
									
                                    <input type="text" class="coupon_input" required="required" v-model="coupon">
                                    <button class="coupon_button" @click="get_coupon">apply code</button>
									
								</div>
								<div class="shipping">
									<div class="cart_extra_title">Shipping Method</div>
									<ul>
										<li class="shipping_option d-flex flex-row align-items-center justify-content-start">
											<label class="radio_container">
												<input type="radio" id="radio_1" name="shipping_radio" class="shipping_radio">
												<span class="radio_mark"></span>
												<span class="radio_text">Next day delivery</span>
											</label>
											<div class="shipping_price ml-auto">$4.99</div>
										</li>
										<li class="shipping_option d-flex flex-row align-items-center justify-content-start">
											<label class="radio_container">
												<input type="radio" id="radio_2" name="shipping_radio" class="shipping_radio">
												<span class="radio_mark"></span>
												<span class="radio_text">Standard delivery</span>
											</label>
											<div class="shipping_price ml-auto">$1.99</div>
										</li>
										<li class="shipping_option d-flex flex-row align-items-center justify-content-start">
											<label class="radio_container">
												<input type="radio" id="radio_3" name="shipping_radio" class="shipping_radio" checked>
												<span class="radio_mark"></span>
												<span class="radio_text">Personal Pickup</span>
											</label>
											<div class="shipping_price ml-auto">Free</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>

					<!-- Cart Total -->
					<div class="col-xxl-6">
						<div class="cart_extra cart_extra_2">
							<div class="cart_extra_content cart_extra_total">
								<div class="cart_extra_title">Cart Total</div>
								<ul class="cart_extra_total_list">
									<li class="d-flex flex-row align-items-center justify-content-start">
										<div class="cart_extra_total_title">Subtotal</div>
										<div class="cart_extra_total_value ml-auto">$29.90</div>
									</li>
									<li class="d-flex flex-row align-items-center justify-content-start">
										<div class="cart_extra_total_title">Shipping</div>
										<div class="cart_extra_total_value ml-auto">Free</div>
									</li>
									<li class="d-flex flex-row align-items-center justify-content-start">
										<div class="cart_extra_total_title">Total</div>
										<!-- <!-- <div class="cart_extra_total_value ml-auto">${{ total * discount | number }}</div> -->
										<div class="cart_extra_total_value ml-auto">${{ money }}</div>
									</li>
								</ul>
								<div class="checkout_button trans_200" @click="get_tbapi()"><a>proceed to checkout</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
            
                
            
                <!-- Footer -->
            
                <myfooter></myfooter>


            
            
            </div>

      
</template>
      
      
       
      <script>


        import myheader from './header.vue'
        import myfooter from './footer.vue'
        import Cookies from 'js-cookie'
      
      export default {
        data () {
          return {
            msg: "这是一个变量",
            datalist:[],
            coupon:'',
            discount:1,
            goodslist:[],
            imgslist:[],
			count:0,
			total:0,
			money:0,

            clicked:0,
            upath: '',
          result: '',
          uping:0
          }
        },
        components: {
        'myheader':myheader,
        'myfooter':myfooter
        },
        mounted:function(){
            
            this.common.get_menu();

            let id = this.$route.query.id

			var data = Cookies.get('cart')
			if (data){
				data = JSON.parse(data)
				this.datalist = data;
				this.total_price()
			}
        },
        methods:{
            changetest(index){
                this.clicked = index;
			},
			getImgurl:function(image){
                let image_url = this.base_url+'/static/upload/'
                let url = image_url+image
                console.log(url)
                return url
            },
			total_price:function(){
				let cartlist = this.datalist;
				this.total = 0
				this.count = 0
            	for(let i=0,l=cartlist.length;i<l;i++){
                this.total = this.total + (cartlist[i].price * cartlist[i].num);
				this.count = this.count + cartlist[i].num
				this.money = this.total
				}
			},
			// 存入redis
            post_redis:function(){
				var add_cart_redis =  this.base_url + '/add_cart_redis'
				var _this = this
				var params = {
					'cartlist':JSON.stringify(this.datalist)
				}
                this.axios.post(add_cart_redis,this.qs.stringify(params))
                .then(function(result) {
				if(result.data['code'] == '200') {
					console.log(result.data.message)
				}
				else {
					_this.msg = result.data.message
					console.log(result.data)
				}
                }); 
			},
			get_coupon(){
				var token = localStorage.getItem('token')
				var username = Cookies.get('username')

				let url =  this.base_url + '/get_coupon'
				var _this = this;
				var token = localStorage.getItem('token')
				var user_id = localStorage.getItem('user_id')
				var data = {
					'coupon':_this.coupon,
					'total':_this.total,
					'token':token,
					'username':username,
				}
				this.axios.post(url,this.qs.stringify(data))
				.then(function(result) {
					console.log(result)
					if (result.data.code == 200){
						console.log(result.data)
						_this.discount = result.data.coupon
						_this.money = _this.discount * _this.total
						console.log('恭喜您享受' + _this.discount + '折扣')
					}else{
						console.log(result.data)
					}
				})
		},
		get_tbapi:function(){
			var data = Cookies.get('cart')
			if (data){
				data = JSON.parse(data)
				this.datalist = data;
				var token = localStorage.getItem('token')
				var username = Cookies.get('username')
				let url =  this.base_url + '/get_tbapi'
				var _this = this;
				var data = {
					'coupon':_this.coupon,
					'money':_this.money,
					'datalist':JSON.stringify(_this.datalist),
					'total':_this.total,
					'token':token,
					'username':username,
						}
				this.axios.post(url,this.qs.stringify(data))
				.then(function(result) {
					if (result.data.code == 200){
					console.log(result.data.url)
					var tburl = result.data.url
					window.location.href = tburl
					// Cookies.remove('cart')
					}
			})
			}
		},
        },
        filters: {
			//保留2位小数点过滤器 不四舍五入
			number (value) {
			// 截取当前数据到小数点后两位
			let realVal = parseFloat(value).toFixed(2)
			return realVal
		}
  },
      }
      
      
      </script>
       
      <style>
			
			@import '../assets/styles/cart.css';
			@import '../assets/styles/cart_responsive.css';
      
      </style>